<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Directions</title>
<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0px; padding: 0px }
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 

	var queryParams = {};
	var directionDisplay = null;
  	var directionsService = new google.maps.DirectionsService();
  	var map = null;
  	
  	function isTouchDevice(){
		try{
			document.createEvent("TouchEvent");
			return true;
		}catch(e){
			return false;
		}
	}
	function touchScroll(id){
		if(isTouchDevice()){ //if touch events exist...
			var el=document.getElementById(id);
			var scrollStartPos=0;

			document.getElementById(id).addEventListener("touchstart", function(event) {
				scrollStartPos=this.scrollTop+event.touches[0].pageY;
				event.preventDefault();
			},false);

			document.getElementById(id).addEventListener("touchmove", function(event) {
				this.scrollTop=scrollStartPos-event.touches[0].pageY;
				event.preventDefault();
			},false);
		}
	}
 
  	function initialize() {
  		
  		touchScroll('listbox');
  		readQueryParams();
  		directionsDisplay = new google.maps.DirectionsRenderer();
    	map = new google.maps.Map(document.getElementById("mapbox"), {
    		zoom: 8, 
    		disableDefaultUI: true, 
    		mapTypeId: google.maps.MapTypeId.ROADMAP
    	});
    	directionsDisplay.setMap(map);
    	directionsDisplay.setPanel(document.getElementById("listbox"));
    	
    	var request = {
    	        origin: queryParams["org"] && queryParams["org"] != null && queryParams["org"] != '' ? queryParams["org"] : new google.maps.LatLng(queryParams["orglat"], queryParams["orglng"]), 
    	        destination: queryParams["dest"],
    	        travelMode: queryParams["mode"]
    	};
    	
    	directionsService.route(request, function(response, status) {
    		if (status == google.maps.DirectionsStatus.OK) {
    	    	directionsDisplay.setDirections(response);
    	    }
    	});
    	
  	}
  
	function readQueryParams() {
		//get the current URL
		var url = window.location.toString();	
		//get the parameters
		url.match(/\?(.+)$/);
		var params = RegExp.$1;
		// split up the query string and store in an associative array
		var params = params.split("&");
		for(var i=0;i<params.length;i++)
		{
	    	var tmp = params[i].split("=");
	    	queryParams[tmp[0]] = unescape(tmp[1]);
		}  
	}
	
	function toggleView(view) {
		var mapbox = document.getElementById("mapbox");
		var mapbtn = document.getElementById("mapbtn");
		var listbox = document.getElementById("listbox");
		var listbtn = document.getElementById("listbtn");
		
		if (view == 'map') {
			
			listbox.style.display = 'none';
			mapbtn.style.display = 'none';
			mapbox.style.display = 'block';
			listbtn.style.display = 'block';
			
		} else if (view == 'list') {
			
			mapbox.style.display = 'none';
			listbtn.style.display = 'none';
			listbox.style.display = 'block';
			mapbtn.style.display = 'block';
		} 
	}
</script> 
</head> 
<body onload="initialize()"> 
<div id="mapbox" style="display:block; width:100%; height:100%;"></div> 
<div id="listbox" style="display:none; width:100%; height: 100%; overflow:auto;"></div>
<div id="listbtn" style="display:block; position:absolute; bottom: 0px; right:0px; height: 50px; width: 50px; float:right;" ><img  width="50" height="50" style="cursor:pointer;" src="https://s3.amazonaws.com/Gadget-Nearby-Test/images/list.png" onclick="toggleView('list');" /></div>
<div id="mapbtn" style="display:none; position:absolute; bottom: 0px; right:0px;  height: 50px; width: 50px; float:right;" ><img width="50" height="50" style="cursor:pointer;" src="https://s3.amazonaws.com/Gadget-Nearby-Test/images/map.png" onclick="toggleView('map');" /></div>   			
</body> 
</html> 